<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/memberAdd.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/style/common.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4586065_entif6iefxe.css">
</head>
<body>
<c:import url="../header.jsp"></c:import>
<div id="box">
  <div id="TopDiv">
    <span onclick="history.back()"><i class="iconfont icon-fanhuijiantou"></i>&nbsp;&nbsp;返回&nbsp;&nbsp;&nbsp;</span>
    <span><strong>&nbsp;&nbsp;添加会员</strong></span>
  </div>
  <div id="FromDiv">
      <div class="input">
        <span class="red">*</span>&nbsp;姓名:&nbsp;&nbsp;
        <input id="name" name="name" class="text" type="text" autocomplete="off" placeholder="请输入姓名" maxlength="20">
        <span class="Errorname"></span>
      </div>
      <div class="input">
        <span class="red">*</span>&nbsp;手机号:&nbsp;&nbsp;
        <input id="phone" name="phone" class="text" type="text" autocomplete="off" placeholder="请输入手机号" maxlength="11">
        <span class="Errorphone"></span>
      </div>
      <div class="input">
        <span class="red">*</span>&nbsp;会员卡号:&nbsp;&nbsp;
        <input id="cartnumber" name="cartnumber" class="text" type="text" autocomplete="off" placeholder="请输入会员卡号" maxlength="12">
        <span class="Errorcartnumber"></span>
      </div>
      <div class="input">
        <span class="red">*</span>&nbsp;储值余额:&nbsp;&nbsp;
        <input id="balance" name=balance" class="text" type="text" autocomplete="off" placeholder="请输入储值金额">
        <span class="Errorbalance"></span>
      </div>
      <div class="button">
        <button class="cancel" onclick="history.back()">
          <span>取消</span>
        </button>
        <button class="conserve" onclick="add()">
          <span>保存</span>
        </button>
        <button class="add">
          <span>保存并继续添加</span>
        </button>
      </div>
  </div>
</div>
<c:import url="../Leftnavigationbar.jsp"></c:import>
</body>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script>
  // 查询
  $(function (){
    bind()
  })
  var str="";
  function bind(){
    $.ajax({
      type:'post',
      url:'/MemberServlet',
      data:{},
      success:function (data){
        var list=eval(data);
        str='';
        $(list).each(function (i,j){
          str+='<tr><td>'+j.name+'</td><td>'+j.phone+'</td><td>'+j.cartNumber+'</td><td>'+j.balance+'(元)</td><td>'+j.totalAmount+'(元)</td><td><p></p>'+(j.status===1?"启用":"禁用")+'</td><td>'+j.createTime+'</td><td><button class="update" >修改</button><button class="forbidden">禁用</button></td></tr>'
        })
        $('#tb').html('')
        $('#tb').append('<tr><td><strong>会员姓名</strong></td><td><strong>手机号</strong></td><td><strong>会员卡号</strong></td><td><strong>余额</strong></td><td><strong>累计消费</strong></td><td><strong>状态</strong></td><td><strong>注册时间</strong></td><td><strong>操作</strong></td></tr>')
        $('#tb').append(str)
      }
    })
  }
  //添加
  function add() {
    $.ajax({
      type: 'post',
      url: "/MemberAddServlet",
      data: {
        name:$('#name').val(),
        phone:$('#phone').val(),
        cartnumber: $('#cartnumber').val(),
        balance:$('#balance').val()
      },
      success: function (data) {
        if (data === 'ok') {
          alert('添加成功')
          window.location.href='/admin/member.jsp'
          bind();
        }
      }
    })
  }
  // 账号
  const name=document.getElementById('name')
  name.addEventListener('blur',(e) => {
    if(name.value===''){
      document.querySelector('.Errorname').innerHTML='姓名不能为空!'
      return
    }
  })
  // 手机号
  const phone=document.getElementById('phone')
  phone.addEventListener('blur',(e) => {
    if(phone.value===''){
      document.querySelector('.Errorphone').innerHTML='手机号不能为空!'
      return
    }
  })
  // 会员卡号
  const cartnumber=document.getElementById('cartnumber')
  cartnumber.addEventListener('blur',(e) => {
    if(cartnumber.value===''){
      document.querySelector('.Errorcartnumber').innerHTML='会员卡号为空,将默认以手机号为卡号!'

      return
    }
  })

  // 储值余额
  const balance=document.getElementById('balance')
  balance.addEventListener('blur',(e) => {
    if(balance.value===''){
      document.querySelector('.Errorbalance').innerHTML='储值余额不能为空!'
      return
    }
  })

</script>
</html>